<template>
  <view class="mailList">
    <view class="top">
      <view class="example-body">
        <uni-search-bar
          class="uni-search-bar"
          clearButton="always"
          :placeholder="$t('关键词')"
          radius="100"
          @cancel="cancel"
          @confirm="search"
          @input="input"
        />
      </view>
      <view class="addressBook">
        <scroll-view scroll-x="true">
          <view class="scroll-view_H">
            <view class="scroll-item">
              <view @click="MailList({ key: '' }, 0)">{{$t('通讯录')}}</view>
            </view>
            <view v-for="(item, index) in departmentsParen" :key="index" class="scroll-item">
              <uni-icons class="uni-icons" color="#8f8f94" size="14" type="arrowright" />
              <view @click="MailList(item, 1)">{{ item.label }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="ul">
      <view v-for="(item, index) in departments" :key="index" class="li" @click="subordinate(item)">
        <view class="label">
          <view class="iconfont icon-wenjianjia"></view>
          {{ item.label }}
        </view>
        <view class="iconfont icon-changyongtubiao_liuchengguanli">{{$t('下级')}}</view>
      </view>
    </view>
    <view :class="employeesList.length > 0 ? 'padding' : ''" class="bottom">
      <view v-if="check.employees.length > 0">
        <!-- @change="handCheckedCities" -->
        <checkbox-group class="checkbox-group">
          <label
            v-for="(item, index) in check.employees"
            :key="index"
            :label="item.label"
            class="el-checkbox"
            @tap="handCheckedCities(item, index)"
          >
            <checkbox
              :checked="item.checked"
              :value="'' + item.key"
              color="#3396fb"
              style="transform: scale(0.8)"
            />
            {{ item.label }}
          </label>
        </checkbox-group>
      </view>
      <view v-else class="maske">{{$t('暂无数据')}}</view>
    </view>
    <view v-if="employeesList.length > 0" class="footer">
      <view class="left">{{$t('已选择')}}：{{ employeesList.length }}人</view>
      <view class="rigth" @click="endEmployees">{{$t('确定')}}</view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api'])
  },
  components: {
    uniSearchBar
  },
  data() {
    return {
      title: '',
      searchValue: '', //搜索值
      departmentsParen: [], //组织列表上级的
      departments: [], //组织列表
      departmentId: '', //父级组织id,如果为null,则查询根节点公司id下的通讯录(部门列表+员工列表)信息
      employeesList: [], //已选择的审批人列表(用于回显)
      deviceId: '',
      check: {
        employees: [], //审批人列表
        checkedCities: [] //当前组织下选择的审批人（为了回显当前组织下的审批人）
      },
      enterpriseId: '' //电子印章所需要的企业id
    }
  },
  onLoad(e) {
    this.title = e.type
    uni.setNavigationBarTitle({
      //设置为动态标题
      title: this.$t(e.type)
    })
    if (this.title === '电子章审批人') {
      this.deviceId = e.sealId
      this.enterpriseId = e.enterpriseId
      //回显
      if (e.data) {
        this.employeesList = JSON.parse(e.data)
      }
      this.getElectron()
    } else {
      if (e.deviceId) {
        this.deviceId = e.deviceId
        this.getOrganizationalToApplicationForm() //申请用章时调用的选取审批人
        if (e.data) {
          this.employeesList = JSON.parse(e.data)
        }
      }
    }
  },
  methods: {
    //申请电子用章时调用的选取审批人
    getElectron() {
      this.$u
        .get(this.api.GLOBAL_electronic_enterprise_application_findManagerList, {
          queryUser: true,
          enterpriseId: this.enterpriseId,
          departmentId: this.departmentId,
          sealId: this.deviceId,
          keyword: this.searchValue
        })
        .then((res) => {
          if (res.code === 200 && res.data) {
            if (res.data.children) {
              this.departments = res.data.children.map((item) => {
                item.key = item.id
                item.label = item.name
                return item
              })
            } else {
              this.departments = []
            }
            if (res.data.userList) {
              this.check.employees = res.data.userList.map((item) => {
                item.key = item.userId
                item.label = item.username
                item.checked = false
                return item
              })
            } else {
              this.check.employees = []
            }
            //回显选择人
            this.echoDisplay()
          } else {
            //获取的部门
            this.departments = []
            this.check.employees = []
          }
        })
    },
    //申请用章时调用的选取审批人
    getOrganizationalToApplicationForm() {
      this.$u
        .post(this.api.GLOBAL_user_getOrganizationalToApplicationForm, {
          departmentId: this.departmentId,
          deviceId: this.deviceId,
          keyword: this.searchValue
        })
        .then((res) => {
          if (res.code === 200 && res.data) {
            //获取的部门
            this.departments = res.data.departments || []
            try {
              this.check.employees = res.data.employees.map((res) => {
                return {
                  checked: false,
                  ...res
                }
              })
            } catch (e) {
              this.check.employees = []
            }
            //回显选择人
            this.echoDisplay()
          } else {
            //获取的部门
            this.departments = []
            this.check.employees = []
          }
        })
    },
    //点击通讯录
    MailList(item, type) {
      this.departmentId = item.key
      if (this.title === '电子章审批人') {
        this.getElectron()
      } else {
        this.getOrganizationalToApplicationForm() //申请用章时调用的选取审批人
      }

      if (type === 1) {
        this.departmentsParen.forEach((res, index) => {
          if (item.key === res.key) {
            this.departmentsParen = this.departmentsParen.slice(0, index + 1)
          }
        })
      } else {
        this.departmentsParen = []
      }
      //回显选择人
      this.echoDisplay()
    },
    //下级
    subordinate(item) {
      this.departmentsParen.push(item)
      this.departmentId = item.key
      if (this.title === '电子章审批人') {
        this.getElectron()
      } else {
        this.getOrganizationalToApplicationForm() //申请用章时调用的选取审批人
      }
      //回显
      this.echoDisplay()
    },
    //回显
    echoDisplay() {
      for (let a = 0; a < this.check.employees.length; a++) {
        const item = this.check.employees[a]
        let { kets, values, entries } = Object
        for (let [kets, values] of entries(this.employeesList)) {
          if (values.key === item.key) {
            this.$set(item, 'checked', true)
          }
        }
      }
    },
    //已选择的审批人
    handCheckedCities(e, index) {
      if (e.checked) {
        //删除
        this.check.employees[index].checked = false
        this.employeesList = this.employeesList.filter((res) => res.key !== e.key)
      } else {
        //添加
        this.check.employees[index].checked = true
        this.employeesList.push({
          checked: true,
          ...e
        })
      }
      if (this.title === '转交人') {
        uni.$emit('data_transfer', this.employeesList)
        uni.navigateBack({
          delta: 1
        })
      }
      //console.log(this.employeesList);
    },
    //点击确认
    endEmployees() {
      //console.log(this.employeesList);
      uni.$emit('data_audit', this.employeesList)
      uni.navigateBack({
        delta: 1
      })
    },
    //搜索
    search(res) {
      this.searchValue = res.value
      if (this.title === '电子章审批人') {
        this.getElectron()
      } else {
        this.getOrganizationalToApplicationForm() //申请用章时调用的选取审批人
      }
    },
    input(res) {
      this.searchValue = res
      if (this.title === '电子章审批人') {
        this.getElectron()
      } else {
        this.getOrganizationalToApplicationForm() //申请用章时调用的选取审批人
      }
    },
    cancel(res) {
      this.searchValue = ''
      if (this.title === '电子章审批人') {
        this.getElectron()
      } else {
        this.getOrganizationalToApplicationForm() //申请用章时调用的选取审批人
      }
    }
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord()
    // #endif
  }
}
</script>

<style lang="scss" scoped>
@import './mailList.scss';
</style>
